<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="~{common/header :: commonHead}"></head>
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight"
     th:with="page=${pageObj.page},size=${pageObj.pageSize},total=${pageObj.total},totalPage=${pageObj.totalPage},keyword=${pageObj.keyword},fromDate=${pageObj.fromDate},toDate=${pageObj.toDate}">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="ibox-tools">
                        <shiro:hasPermission name="add_notice">
                            <a href="/notice/add" title="添加"><i class="glyphicon glyphicon-plus-sign"></i></a>
                        </shiro:hasPermission>
                        <a href="javascript: window.location.href='/notice/list';" title="刷新"><i
                                class="glyphicon glyphicon-repeat"></i></a>
                    </div>
                    <div id="editable_wrapper" class="dataTables_wrapper form-inline" role="grid">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="dataTables_length" id="editable_length"><label>每页
                                    <select name="editable_length" aria-controls="editable"
                                            class="form-control input-sm" id="page_size_selector">
                                        <option th:selected="${pageObj.pageSize eq 5}" value="5">5</option>
                                        <option th:selected="${pageObj.pageSize eq 10}" value="10">10</option>
                                        <option th:selected="${pageObj.pageSize eq 25}" value="25">25</option>
                                        <option th:selected="${pageObj.pageSize eq 50}" value="50">50</option>
                                        <option th:selected="${pageObj.pageSize eq 100}" value="100">100</option>
                                    </select> 条记录</label>
                                </div>
                            </div>
                            <!--  <div class="col-sm-2" id="adsence"
                                   th:style="static">
                                  <div class="col-sm-6">
                                      <select id="orgId2" name="adsenceId" data-placeholder="请选择广告..."
                                              class="chosen-select form-control m-b" tabindex="1">
                                          <option >&#45;&#45;请选择广告位置&#45;&#45;</option>
                                          <option class="id_option" hassubinfo="true" th:each="adsenceDTO:${adsenceDTOS}" th:selected="${adsenceDTO.id}" th:value="${adsenceDTO.id }" th:text="${adsenceDTO.name}"></option>
                                      </select>
                                  </div>
                              </div>-->

                            <div class="col-sm-3">
                                <div class="input-group" style="float: right">
                                    <input th:value="${pageObj.keyword}" type="text" placeholder="请输入关键词"
                                           class="input-sm form-control" id="search_bar">
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"
                                                id="search-btn"> 搜索</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-bottom"
                             style="display: none; top: 901.2px; left: 264.8px; z-index: 10;">
                            <div class="datepicker-days" style="display: block;">
                                <table class=" table-condensed">
                                    <thead>
                                    <tr>
                                        <th class="prev" style="visibility: visible;">«</th>
                                        <th colspan="5" class="datepicker-switch">十一月 2014</th>
                                        <th class="next" style="visibility: visible;">»</th>
                                    </tr>
                                    <tr>
                                        <th class="dow">日</th>
                                        <th class="dow">一</th>
                                        <th class="dow">二</th>
                                        <th class="dow">三</th>
                                        <th class="dow">四</th>
                                        <th class="dow">五</th>
                                        <th class="dow">六</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td class="old day">26</td>
                                        <td class="old day">27</td>
                                        <td class="old day">28</td>
                                        <td class="old day">29</td>
                                        <td class="old day">30</td>
                                        <td class="old day">31</td>
                                        <td class="day">1</td>
                                    </tr>
                                    <tr>
                                        <td class="day">2</td>
                                        <td class="day">3</td>
                                        <td class="day">4</td>
                                        <td class="day">5</td>
                                        <td class="day">6</td>
                                        <td class="day">7</td>
                                        <td class="day">8</td>
                                    </tr>
                                    <tr>
                                        <td class="day">9</td>
                                        <td class="day">10</td>
                                        <td class="selected day">11</td>
                                        <td class="range day">12</td>
                                        <td class="range day">13</td>
                                        <td class="range day">14</td>
                                        <td class="range day">15</td>
                                    </tr>
                                    <tr>
                                        <td class="range day">16</td>
                                        <td class="active selected day">17</td>
                                        <td class="day">18</td>
                                        <td class="day">19</td>
                                        <td class="day">20</td>
                                        <td class="day">21</td>
                                        <td class="day">22</td>
                                    </tr>
                                    <tr>
                                        <td class="day">23</td>
                                        <td class="day">24</td>
                                        <td class="day">25</td>
                                        <td class="day">26</td>
                                        <td class="day">27</td>
                                        <td class="day">28</td>
                                        <td class="day">29</td>
                                    </tr>
                                    <tr>
                                        <td class="day">30</td>
                                        <td class="new day">1</td>
                                        <td class="new day">2</td>
                                        <td class="new day">3</td>
                                        <td class="new day">4</td>
                                        <td class="new day">5</td>
                                        <td class="new day">6</td>
                                    </tr>
                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <th colspan="7" class="today" style="display: none;">今天</th>
                                    </tr>
                                    <tr>
                                        <th colspan="7" class="clear" style="display: none;">清空</th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <div class="datepicker-months" style="display: none;">
                                <table class="table-condensed">
                                    <thead>
                                    <tr>
                                        <th class="prev" style="visibility: visible;">«</th>
                                        <th colspan="5" class="datepicker-switch">2014</th>
                                        <th class="next" style="visibility: visible;">»</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td colspan="7"><span class="month">1</span><span class="month">2</span><span
                                                class="month">3</span><span class="month">4</span><span
                                                class="month">5</span><span class="month">6</span><span
                                                class="month">7</span><span class="month">8</span><span
                                                class="month">9</span><span class="month">10</span><span
                                                class="month active">11</span><span class="month">12</span></td>
                                    </tr>
                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <th colspan="7" class="today" style="display: none;">今天</th>
                                    </tr>
                                    <tr>
                                        <th colspan="7" class="clear" style="display: none;">清空</th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <div class="datepicker-years" style="display: none;">
                                <table class="table-condensed">
                                    <thead>
                                    <tr>
                                        <th class="prev" style="visibility: visible;">«</th>
                                        <th colspan="5" class="datepicker-switch">2010-2019</th>
                                        <th class="next" style="visibility: visible;">»</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td colspan="7"><span class="year old">2009</span><span class="year">2010</span><span
                                                class="year">2011</span><span class="year">2012</span><span
                                                class="year">2013</span><span class="year active">2014</span><span
                                                class="year">2015</span><span class="year">2016</span><span
                                                class="year">2017</span><span class="year">2018</span><span
                                                class="year">2019</span><span class="year new">2020</span></td>
                                    </tr>
                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <th colspan="7" class="today" style="display: none;">今天</th>
                                    </tr>
                                    <tr>
                                        <th colspan="7" class="clear" style="display: none;">清空</th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                        <table class="table table-striped table-bordered table-hover  dataTable" id="editable"
                               aria-describedby="editable_info">
                            <thead>
                            <tr role="row">
                                <th aria-label="标题" style="width: 20%;">标题</th>
                                <th aria-label="公告内容" style="width: 50%;">公告内容</th>
                                <th aria-label="操作" style="width: 10%;">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="gradeA odd" th:if="${#lists.isEmpty(pageObj.list)}">
                                <td colspan="9" style="text-align: center">
                                    没有数据o&gt;^&lt;o
                                </td>
                            </tr>
                            <tr class="gradeA odd" th:each="item : ${pageObj.list}">
                                <td th:with="keyword=${pageObj.keyword},title=${item.title}"
                                    th:utext="${null == keyword ? title : #strings.replace(title,keyword,'<span style= &quot;color: red;font-weight:bold&quot;>'+ keyword +'</span>')}"></td>
                                <td th:with="keyword=${pageObj.keyword},text=${item.text}"
                                    th:utext="${null == keyword ? text : #strings.replace(text,keyword,'<span style= &quot;color: red;font-weight:bold&quot;>'+ keyword +'</span>')}"></td>
                                <td class="center ">
                                    <shiro:hasPermission name="update_notice_status">
                                        <button th:data="${item.statusShow}"
                                                th:onclick="changeStatus([[${item.id}]],this);" id="changeStatus"
                                                th:class="'btn btn-xs ' + ${item.statusShow==1?'btn-primary':'btn-danger'}"
                                                th:text="${item.statusShow == 1 ?'上架':'下架'}"></button>
                                    </shiro:hasPermission>
                                    <shiro:hasPermission name="edit_notice">
                                        <a type="button" th:href="${'/notice/edit?id=' + item.id}" title="编辑"
                                           class="btn btn-primary btn-xs">编辑</a>
                                    </shiro:hasPermission>
                                    <shiro:hasPermission name="delete_notice">
                                        <a type="button" th:href="${'/notice/delete?id=' + item.id}" title="删除"
                                           class="btn btn-warning btn-xs">删除</a>
                                    </shiro:hasPermission>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="row">
                            <div class="col-sm-6" th:with="page=${pageObj.page},size=${pageObj.pageSize},total=${pageObj.total},totalPage=${pageObj.totalPage}">
                                <div class="dataTables_info" role="alert" aria-live="polite" aria-relevant="all"
                                     th:text="${'显示 ' + (page * size + 1) + ' 到 ' + ((page+1) lt totalPage ? (size + page * size) : (total % size == 0 ? total : (total % size + size * page))) + ' 项，共 ' + total + ' 项'}">
                                </div>
                            </div>
                            <div class="col-sm-6" th:with="page=${pageObj.page},size=${pageObj.pageSize},total=${pageObj.total},totalPage=${pageObj.totalPage}">
                                <div class="dataTables_paginate paging_simple_numbers">
                                    <ul class="pagination">
                                        <li th:class="${page==0} ? 'paginate_button previous disabled' : 'paginate_button previous'">
                                            <a th:href="${(pageObj.page==0) ? '#' : '/banner/list?page='+ (pageObj.page)
                                             +'&pageSize='+pageObj.pageSize
                                             +'&keyword='+(null == pageObj.keyword ? '' : pageObj.keyword)
                                             +'&fromDate='+(null == pageObj.fromDate ? '' : pageObj.fromDate)
                                             +'&toDate='+(null == pageObj.toDate ? '' : pageObj.toDate)}">上一页</a>
                                        </li>
                                        <li th:if="${pageObj.page >= 0 && pageObj.totalPage>0}" th:each="i:${#numbers.sequence(1,pageObj.totalPage)}"
                                            th:class="${i == pageObj.page+1 ? 'active' : ''}">
                                            <a th:href="${'/banner/list?page=' + i
                                            +'&pageSize='+pageObj.pageSize
                                            +'&keyword='+ (null == pageObj.keyword ? '' : pageObj.keyword)
                                            +'&fromDate='+(null == pageObj.fromDate ? '' : pageObj.fromDate)
                                            +'&toDate='+(null == pageObj.toDate ? '' : pageObj.toDate)}"
                                               th:text="${i}" ></a>
                                        </li>
                                        <li th:class="${pageObj.page+1==pageObj.totalPage || pageObj.totalPage<1}?'paginate_button next disabled' : 'paginate_button next'" >
                                            <a th:href="${(pageObj.page+1==pageObj.totalPage || pageObj.totalPage<1) ? '#' : '/banner/list?page='+ (pageObj.page+2)
                                             +'&pageSize='+pageObj.pageSize
                                             +'&keyword='+ (null == pageObj.keyword ? '' : pageObj.keyword)
                                             +'&fromDate='+(null == pageObj.fromDate ? '' : pageObj.fromDate)
                                             +'&toDate='+(null == pageObj.toDate ? '' : pageObj.toDate)}">下一页</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">

    function changeStatus(id, e) {
        let status = $(e).attr("data");
        $.ajax({
            url: "/notice/updateStatus",
            type: "get",
            data: {id: id, status: status},
            success: function (data) {
                if (data.resCode == 0) {
                    layer.msg("操作成功", {icon: 1, time: 1000, shade: [0.5, '#000', true]});
                    let changeSta = data.data;
                    if (changeSta == 0) {
                        $(e).removeClass("btn-danger");
                        $(e).addClass("btn-primary");
                        $(e).next().removeAttr("disabled");
                        $(e).next().attr("href", "/notice/edit?id=" + id);
                        $(e).html("上架");
                    }
                    if (changeSta == 1) {
                        $(e).removeClass("btn-primary");
                        $(e).addClass("btn-danger");
                        $(e).next().attr("disabled", "disabled");
                        $(e).next().attr("href", "javascript:void(0);");
                        $(e).html("下架");
                    }
                    $(e).attr("data", changeSta);
                    window.location.reload();
                } else {
                    layer.msg(data.resMsg, {icon: 1, time: 1000, shade: [0.5, '#000', true]});
                }
            }
        });
    }

    $("#page_size_selector").change(function () {
        let fromDate = $("#start_date").val();
        let toDate = $("#end_date").val();
        let selected = $(this).val();
        window.location.href = initUrl(0, selected, '', fromDate, toDate);
    })
    $("#search_bar").keydown(function (e) {
        let fromDate = $("#start_date").val();
        let toDate = $("#end_date").val();
        if (e.keyCode == 13) {
            let size = [[${size}]];
            let keyword = $(this).val();
            window.location.href = initUrl(0, size, keyword, fromDate, toDate);
        }
    })

    $("#search-btn").click(function () {
        let fromDate = $("#start_date").val();
        let toDate = $("#end_date").val();
        let size = [[${size}]];
        let keyword = $("#search_bar").val();
        window.location.href = initUrl(0, size, keyword, fromDate, toDate);
    })

    function initUrl(page, size, key, fromDate, toDate) {
        if (null == page) {
            page = 0;
        }
        if (null == size) {
            size = 10;
        }
        return "/notice/list?page=" + page + "&pageSize=" + size + "&keyword=" + key + "&fromDate=" + fromDate + "&toDate=" + toDate
    }
</script>
</html>